<template>
	<view class="container">
		<u-tabs-swiper ref="uTabs" :list="tabList" :current="current" @change="tabsChange" :is-scroll="false" swiperWidth="750" height="94" gutter="60" bar-width="315" active-color="#F85962"></u-tabs-swiper>
		<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish" :style="{ height: scrollHeight + 'px' }">
			<swiper-item :style="{ height: scrollHeight + 'px' }" v-for="(item, index) in tabList" :key="index"><user-hebavior-scroll :height="scrollHeight" :type="item.type"></user-hebavior-scroll></swiper-item>
		</swiper>
	</view>
</template>

<script>
import userHebaviorScroll from '../components/custom/user-hebavior-scroll.vue';
export default {
	components: { userHebaviorScroll },
	data() {
		return {
			current: 0,
			swiperCurrent: 0,
			scrollHeight: null,
			tabList: [
				{
					type: 'favors',
					name: '关注'
				},
				{
					type: 'fans',
					name: '粉丝'
				}
			]
		};
	},
	onLoad(options) {
		const type = options.type || '';
		if (type) {
			this.tabList.map((item, index) => {
				if (item.type == type) {
					this.current = index;
					this.swiperCurrent = index;
				}
			});
		}
	},
	onShow() {
		const systemInfo = uni.getSystemInfoSync();
		this.scrollHeight = systemInfo.windowHeight - uni.upx2px(94);
	},
	methods: {
		tabsChange(index) {
			this.swiperCurrent = index;
		},
		transition(e) {
			this.$refs.uTabs.setDx(e.detail.dx);
		},
		animationfinish(e) {
			let current = e.detail.current;
			this.$refs.uTabs.setFinishCurrent(current);
			this.swiperCurrent = current;
			this.current = current;
		}
	}
};
</script>

<style></style>
